<template>
    <div class="owe-book">
      <!-- 导航 -->
      <van-nav-bar title="已购买的课程" left-arrow @click-left="back()" />
      <!-- 导航栏 -->
      <div class="owe-nav">
        <span
          class="nav-item"
          :class="isLight == 0 ? 'active' : ''"
          @click="toTrainingPlan"
          >训练营</span
        >
        <span
          class="nav-item"
          :class="isLight == 1 ? 'active' : ''"
          @click="toLiveCourse"
          >直播课</span
        >
      </div>
      <div class="body">

        <!-- contain -->
        <div class="contain" v-show="isLight == 0">
          <!-- TrainItem -->
          <TrainItem
            v-for="t in courseList"
            :key="t.id"
            :id="t.id"
            :coverKey="t.coverKey"
            :name="t.name"
            :teacherName="t.teacherName"
            :classHour="t.classHour"
            :userCount="t.userCount"
            :salePrice="t.salePrice"
          />
        </div>
        <!-- contain -->
        <div class="contain" v-show="isLight == 1"></div>
      </div>
    </div>
  </template>
  
  <script>
  import { OweCourseAPI } from "@/apis";
  import TrainItem from "@/components/TrainItem.vue";
  export default {
    data() {
      return {
        // 参数
        type: "TrainingPlan",
        page: 1,
        // 输入值
  
        // 高亮状态
        isLight: 0,
        // courseList
        courseList: {},
      };
    },
    mounted() {
      this.getOweData();
    },
    watch: {
      desc() {
        this.getOweData();
      },
    },
    methods: {
      // 网络请求
      async getOweData() {
        // 主要网络请求
        let { data } = await this.$http(
            OweCourseAPI(this.type, this.page),
          {
            headers: {
              Authorization:
                "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiLoi6bnk5xfNzAwNiIsImp0aSI6IjYwODAyNiIsIlVzZXJJZCI6IjYwODAyNiIsImlhdCI6IjIwMjMvMi82IDEyOjI2OjE2IiwibmJmIjoxNjc1Njg2Mzc2LCJleHAiOjE2NzgyNzgzNzYsImlzcyI6Iml0dXJpbmciLCJhdWQiOiJpdHVyaW5nIiwicm9sZXMiOltdfQ.TLGvCrKh6nWkN6L3OYbsOVmLvPXB_-DL2cP_82FDozk",
            },
          }
        );
        this.courseList = data.trainingPlanItems
;
      },
      // 回退
      back() {
        this.$router.go(-1);
      },
      // to Ebook
      toTrainingPlan(){
        this.isLight = 0;
        this.type = 'TrainingPlan';
      },
      // to Pbook
      toLiveCourse(){
        this.isLight = 1;
        this.type = 'LiveCourse';
      }
    },
    components: {
        TrainItem,
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .owe-book {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    z-index: 1999;
    .van-nav-bar {
      padding: 2px 0;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
    }
    // 导航
    .owe-nav {
      padding: 65px 0 15px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solid var(--more-bg-white);
      .nav-item {
        margin: 0 10px;
        color: var(--more-font-grey);
        font-size: 14px;
        &.active {
          font-size: 20px;
          line-height: 26px;
          color: var(--book-name-font-black);
        }
      }
    }
    .body {
      padding: 15px;
      background-color: #fff;
      .contain {
        display: flex;
        flex-wrap: wrap;
      }
    }
  }
  </style>